<template>
  <div>
    <header>
      <el-link href="/" :underline="false">
        <div class="lg"></div>
      </el-link>

      <div class="title"></div>
    </header>
    <div class="login">
      <div class="bg">
        <div class="login-from">
          <Login />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
header {
  // border: 1px solid;
  height: 80px;
  padding-left: 40px;
  position: relative;
  .lg {
    width: 120px;
    height: 60px;
    background: url("~@/assets/logo.png");
    background-size: 120px 60px;
    transform: scale(1.2);
  }
  .title {
    position: absolute;
    left: 150px;
    top: 16px;
    width: 110px;
    height: 40px;
    background-image: url("https://misc.360buyimg.com/user/passport/1.0.0/css/i/l-icon.png");
  }
}
.login {
  background-color: #e93854;
  position: absolute;
  height: 470px;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;

  .bg {
    margin: auto;
    width: 990px;
    height: 470px;
    position: relative;
    background: url("~@/assets/background.png");
    background-size: 100% 100%;
  }

  .login-from {
    width: 346px;
    height: 400px;
    // border: 1px solid;
    position: absolute;
    right: 0;
    margin-top: 28px;
    background-color: #fff;
  }
}
</style>

<script>
import Login from './Login.vue'
export default {
  components: {
    Login
  }
}
</script>

<style>
</style>
